/*****************************************************************************************
**  Author:jxx
**  QQ:283591387
**  框架文档： http://v3.volcore.xyz/
*****************************************************************************************/
//此js文件是用来自定义扩展业务代码，在当前[表.vue]文件中也可以实现业务处理
import printJS from 'print-js'
import QRCode from 'qrcode'
let extension = {
  components: {
    //查询界面扩展组件
    gridHeader: '',
    gridBody: '',
    gridFooter: '',
    //新建、编辑弹出框扩展组件
    modelHeader: '',
    modelBody: '',
    modelRight: '',
    modelFooter: ''
  },
  tableAction: '', //指定某张表的权限(这里填写表名,默认不用填写)
  buttons: { view: [], box: [], detail: [] }, //扩展的按钮
  data() {
    return {
      selectedStudents: [], // 这里存储选中的学生记录
      qrCodeCache: {} // 缓存二维码URL
    }
  },
  methods: {

    
    async print() {
      const selectedRows = this.getSelectRows()
      
      if (!selectedRows || selectedRows.length === 0) {
        this.$message.warning('请先选择要打印的学生记录')
        return
      }

      // 为每条记录生成二维码
      const rowsWithQrCode = await Promise.all(
        selectedRows.map(async row => {
          try {
            // 生成二维码数据URL
            const qrCodeDataUrl = await QRCode.toDataURL(row.StudentNo, {
              width: 100,
              margin: 1
            })
            return {
              ...row,
              qrCodeDataUrl
            }
          } catch (error) {
            console.error('生成二维码失败:', error)
            return row
          }
        })
      )

      // 准备打印内容
      const printContent = `
        <style>
          .student-print-container {
            font-family: Arial, sans-serif;
            width: 100%;
          }
          .student-print-header {
            text-align: center;
            margin-bottom: 20px;
          }
          .student-print-title {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
          }
          .student-table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
          }
          .student-table th, .student-table td {
            border: 1px solid #ddd;
            padding: 8px;
            text-align: left;
          }
          .student-table th {
            background-color: #f2f2f2;
          }
          .qr-code {
            width: 100px;
            height: 100px;
          }
          .student-info {
            margin-bottom: 15px;
            page-break-inside: avoid;
          }
          @media print {
            .page-break {
              page-break-after: always;
            }
          }
        </style>
        <div class="student-print-container">
          <div class="student-print-header">
            <div class="student-print-title">学生信息表</div>
            <div>打印时间: ${new Date().toLocaleString()}</div>
          </div>
          
          ${rowsWithQrCode.map((student, index) => `
            <div class="student-info ${index % 2 === 0 ? 'page-break' : ''}">
              <table class="student-table">
                <tr>
                  <th colspan="4">学生基本信息</th>
                </tr>
                <tr>
                  <td width="15%">学号</td>
                  <td width="35%">${student.StudentNo || '-'}</td>
                  <td width="15%">二维码</td>
                  <td width="35%">
                    <img src="${student.qrCodeDataUrl}" class="qr-code" alt="学号二维码">
                  </td>
                </tr>
                <tr>
                  <td>姓名</td>
                  <td>${student.Name || '-'}</td>
                  <td>性别</td>
                  <td>${student.Gender || '-'}</td>
                </tr>
                <tr>
                  <td>身份证号</td>
                  <td>${student.IDCardNo || '-'}</td>
                  <td>出生日期</td>
                  <td>${student.BirthDate ? new Date(student.BirthDate).toLocaleDateString() : '-'}</td>
                </tr>
                <tr>
                  <td>入学日期</td>
                  <td>${student.EnrollmentDate ? new Date(student.EnrollmentDate).toLocaleString() : '-'}</td>
                  <td>结业日期</td>
                  <td>${student.GraduationDate ? new Date(student.GraduationDate).toLocaleString() : '-'}</td>
                </tr>
                <tr>
                  <td>联系电话</td>
                  <td>${student.ContactPhone || '-'}</td>
                  <td>电子邮箱</td>
                  <td>${student.Email || '-'}</td>
                </tr>
                <tr>
                  <td>家庭地址</td>
                  <td colspan="3">${student.HomeAddress || '-'}</td>
                </tr>
                <tr>
                  <td>紧急联系人</td>
                  <td>${student.EmergencyContact || '-'}</td>
                  <td>紧急联系电话</td>
                  <td>${student.EmergencyPhone || '-'}</td>
                </tr>
                <tr>
                  <td>状态</td>
                  <td>${this.getStatusText(student.Status)}</td>
                  <td>创建时间</td>
                  <td>${student.CreateDate ? new Date(student.CreateDate).toLocaleString() : '-'}</td>
                </tr>
              </table>
            </div>
          `).join('')}
        </div>
      `

      // 打印
      printJS({
        printable: printContent,
        type: 'raw-html',
        header: '学生信息表',
        headerStyle: 'text-align: center; font-size: 16px;',
        style: '@page { size: A4; margin: 10mm; }',
        scanStyles: false
      })
    },
    
    // 辅助方法：获取状态文本
    getStatusText(status) {
      const statusMap = {
        0: '未激活',
        1: '在读',
        2: '休学',
        3: '退学',
        4: '毕业'
      }
      return statusMap[status] || '未知状态'
    }
},


  /*   print() {
      let rows=this.getSelectRows();
      if(rows.length==0){
        this.$Message.error('请先选择要打印的数据');
        return;
      }
      //打印逻辑

    }, */
  //下面这些方法可以保留也可以删除
  onInit() {  //框架初始化配置前，
    //示例：在按钮的最前面添加一个按钮
    //   this.buttons.unshift({  //也可以用push或者splice方法来修改buttons数组
    //     name: '按钮', //按钮名称
    //     icon: 'el-icon-document', //按钮图标：https://element.eleme.cn/#/zh-CN/component/icon
    //     type: 'primary', //按钮样式:https://element-plus.gitee.io/zh-CN/component/button.html
    //     //color:"#eee",//自定义按钮颜色
    //     onClick: function () {
    //       this.$Message.success('点击了按钮');
    //     }
    //   });

    //示例：设置修改新建、编辑弹出框字段标签的长度
    // this.boxOptions.labelWidth = 150;
  },
  onInited() {
    //框架初始化配置后
    //如果要配置明细表,在此方法操作
    //this.detailOptions.columns.forEach(column=>{ });
  },
  searchBefore(param) {
    //界面查询前,可以给param.wheres添加查询参数
    //返回false，则不会执行查询
    return true;
  },
  searchAfter(result) {
    //查询后，result返回的查询数据,可以在显示到表格前处理表格的值
    return true;
  },
  addBefore(formData) {
    //新建保存前formData为对象，包括明细表，可以给给表单设置值，自己输出看formData的值
    return true;
  },
  updateBefore(formData) {
    //编辑保存前formData为对象，包括明细表、删除行的Id
    return true;
  },
  rowClick({ row, column, event }) {
    //查询界面点击行事件
    // this.$refs.table.$refs.table.toggleRowSelection(row); //单击行时选中当前行;
  },
  modelOpenAfter(row) {
    //点击编辑、新建按钮弹出框后，可以在此处写逻辑，如，从后台获取数据
    //(1)判断是编辑还是新建操作： this.currentAction=='Add';
    //(2)给弹出框设置默认值
    //(3)this.editFormFields.字段='xxx';
    //如果需要给下拉框设置默认值，请遍历this.editFormOptions找到字段配置对应data属性的key值
    //看不懂就把输出看：console.log(this.editFormOptions)
  }
}
;
export default extension;
